<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px;
        }
        .chart-container {
            width: 45%;
            min-width: 300px;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .totals {
            background-color: #f8f9fa;
            padding: 15px;
            margin: 20px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <button id="calculateBtn" >计算数量</button>
    <div class="totals">
        <h2>汇总数据</h2>
        <div id="totalsDisplay"></div>
    </div>
<!--    <div class="container" id="chartsContainer"></div>-->
<!--    <div class="container">-->
<!--        <div class="chart-container">-->
<!--            <canvas id="combinedChart"></canvas>-->
<!--        </div>-->
<!--    </div>-->
    <h2>详细数据</h2>
    <table id="detailsTable">
        <thead>
        <tr>
            <th>模型名称</th>
            <th>投影面积(m²)</th>
            <th>延伸长度(m)</th>
        </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>
    <!--    <h3>演示1：调用获取当前账号信息接口</h3>-->
<!--    <button onclick="getUserName()">getUserName</button>-->
<!--    <div id="result1">...</div>-->
<!--    </br>-->
<!--    <hr size="10" color="black">-->
<!--    <h3>演示2：小程序UI线程和VM线程的数据通信</h3>-->
<!--    <input type="text" id="thing" placeholder="输入任意信息" />-->
<!--    <button onclick="send()">send</button>-->
<!--    <div id="result2">...</div>-->
<!--    &lt;!&ndash; <button onclick="getDesignId()">getDesignId</button> &ndash;&gt;-->

<!--    </br>-->
<!--    <hr size="10" color="black">-->
<!--    <h3>演示3：小程序iframe窗口设置 </h3>-->
<!--    <button onclick="resize() ">修改小程序iframe尺寸为600X600</button>-->
<!--    <button onclick="position()">修改小程序iframe左上角的位置坐标为{x:0,y:0}</button>-->
<!--    <button onclick="modal()">修改小程序iframe为模态框显示(居中显示,存在遮罩)</button>-->
<!--    <button onclick="fullscreen()">修改小程序iframe尺寸为全屏</button>-->

</body>
<script src="page.js"></script>
<script >
    let result=null;
    document.getElementById('calculateBtn').addEventListener('click', function() {
        getDesignJson(); // 调用 page.js 中的方法
    });
    window.addEventListener('message', function (event) {
        if (event.data.action === 'receiveResult') {
            result = event.data.value;
            console.log('接收到 result:', result);

            // 显示汇总数据
            document.getElementById('totalsDisplay').innerHTML = `
                <p>总投影面积: ${result.totals.totalProjectionQty.toFixed(2)} m²</p>
                <p>总延伸长度: ${result.totals.totalExtendQty.toFixed(2)} m</p>
            `;

            // 显示详细数据表格
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = ''; // 清空旧内容
            result.details.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.modelName}</td>
                    <td>${item.projectionQty.toFixed(2)}</td>
                    <td>${item.extendQty.toFixed(2)}</td>
                `;
                tableBody.appendChild(row);
            });
        }
    });

</script>
</html>